<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>account</title>

    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">

    <script src="./jquery/dist/jquery.min.js"></script>

    <script src="./bootstrap/dist/js/bootstrap.min.js"></script>


    <script src="./vue/dist/vue.min.js"></script>
    <script src="./moment/moment.js"></script>
    <script src="./moment/locale/zh-cn.js"></script>

    <style>
        body {
            background-image: url("14539.jpg");
        }

    </style>

</head>

<body>

    <div class="container" id="apiApp">

        <div class="card" style="margin:10px;">
            <!-- <img class="card-img-top" src="navi.jpeg" style="height:100px;" alt=""> -->
            <div class="card-body">

                <form>

                    <div class="form-group">
                      <label for="">method</label>
                      <select class="form-control" v-model="req.method">
                        <option>get</option>
                        <option>post</option>
                      </select>
                    </div>

                    <div class="form-group">
                      <label for="">url</label>
                      <input type="text" name="" id="" class="form-control" v-model="req.url">
                      <small id="helpId" class="text-muted">Help text</small>
                    </div>


                    <div class="form-group">
                      <label for="">json body (payload)</label>
                      <textarea class="form-control" v-model="req.body" rows="10"></textarea>
                    </div>

                    <button type="button" class="btn btn-primary"  @click="fnTest">test</button>
                </form>
            </div>
        </div>


        <div class="card bg-dark text-white" style="margin:10px;">
            <div class="card-body">

                <form>



                    <div class="form-group">
                      <label for="">result</label>
                      <textarea class="form-control" v-model="res" rows="10"></textarea>
                    </div>

                </form>
            </div>
        </div>



    </div>


</body>

</html>


<script>


    var vm = new Vue({
        el: '#apiApp',
        data: {


            req: {
                method: 'get',
                url: 'http://localhost:9300',
                body: ''

            },

            res: ''

        },



        methods: {

            fnTest(){


                this.res = '';
                let method = this.req.method;
                if("post" == method){

                    this.doPost();
                }else{
                    this.doGet();
                }



            },

            doGet(){


                var _self = this;
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: _self.req.url,
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        _self.res = JSON.stringify(response, null, 2);

                    }
                });
            },


            doPost(){

                var _self = this;
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: _self.req.url,
                    data: _self.req.body,
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {

                        console.log(response);
                        _self.res = JSON.stringify(response, null, 2);

                    }
                });
            },


            // to edit modal
            fnShowEditModal(item) {

                var _self = this;
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "../accounts/" + item.sid,
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            console.log(response);
                            _self.accountForm = response.dat;
                            _self.display = 'detail';
                        }

                    }
                });
            },

            //修改 item
            fnSave() {


                var _self = this;

                var postUrl = './accounts';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.accountForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {


                        console.log(response);
                        if (response.code == 0) {

                            _self.accountForm = response.dat;
                            _self.queryAccountList();
                            _self.fnBack2Main();
                        }

                    }
                });
            },


            fnShowDeleteModal(item) {

                this.deleteId = item.sid;
                $('#deleteModal').modal('show');
            },


            fnDelete() {

                var _self = this;
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: "../accounts/" + _self.deleteId,

                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            _self.queryAccountList();
                            $('#deleteModal').modal('hide');
                        }

                    }
                });


            },



            // 查询 cate
            queryAccountList() {

                var _self = this;
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "../accounts?sort=accountDate,desc&sort=udate,desc",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            console.log(response);
                            _self.dataList = response.dat.content;
                        }

                    }
                });
            },



        },
        mounted() {

//            this.queryAccountList();
        }
    })


</script>